<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SQL.js - Modern SQL Interpreter</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/theme/nord.min.css">
  <link rel="stylesheet" href="demo.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js"></script>
</head>

<body>
  <!-- GitHub corner -->
  <a href="https://github.com/sql-js/sql.js" class="github-corner" aria-label="View on GitHub">
    <svg width="60" height="60" viewBox="0 0 250 250" style="fill:rgba(79, 190, 255, 0.3); color:#0f1923; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
    </svg>
  </a>
  
  <header>
    <h1>SQL.js Interpreter</h1>
    <div class="toolbar">
      <button id="execute" class="button button-primary">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
        Execute
      </button>
      <button id="savedb" class="button button-success">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
          <polyline points="17 21 17 13 7 13 7 21"></polyline>
          <polyline points="7 3 7 8 15 8"></polyline>
        </svg>
        Save DB
      </button>
      <label class="button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
        Load DB
        <input type="file" id="dbfile">
      </label>
      <button id="toggleHistory" class="button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <polyline points="12 6 12 12 16 14"></polyline>
        </svg>
        Examples
      </button>
    </div>
  </header>

  <div class="app-container">
    <!-- Editor Panel -->
    <div class="panel panel-resizable editor-panel">
      <div class="panel-header editor-header">
        <span>SQL Editor</span>
      </div>
      <div class="panel-content">
        <textarea id="commands">-- Basic SQL Demo
-- Create a simple employees table
DROP TABLE IF EXISTS employees;
CREATE TABLE employees (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  department TEXT,
  salary NUMERIC,
  hire_date DATE
);

-- Insert sample data
INSERT INTO employees (name, department, salary, hire_date) VALUES
  ('Alice Smith', 'Engineering', 85000, '2020-01-15'),
  ('Bob Johnson', 'Marketing', 72000, '2019-03-20'),
  ('Carol Williams', 'Engineering', 92000, '2018-11-07'),
  ('Dave Brown', 'Finance', 115000, '2017-05-12'),
  ('Eve Davis', 'Engineering', 110000, '2021-08-30');

-- Query the data
SELECT 
  department, 
  COUNT(*) as employee_count,
  ROUND(AVG(salary), 2) as avg_salary
FROM employees
GROUP BY department
ORDER BY avg_salary DESC;</textarea>
        <div class="query-history" id="queryHistory">
          <!-- History items will be added here dynamically -->
        </div>
      </div>
      <div class="status-bar">
        <div class="status-item" id="editorStatus">
          Ready
        </div>
      </div>
      <div class="resizer" id="panelResizer"></div>
    </div>

    <!-- Results Panel -->
    <div class="panel results-panel">
      <div class="results-tabs" id="resultsTabs">
        <button class="tab active" data-tab="tab1">Result 1</button>
        <button id="newTabBtn" class="tab">+</button>
      </div>
      <div class="panel-content">
        <div id="error" class="error"></div>
        <div class="tab-panel active" id="tab1">
          <div class="results-content">Results will be displayed here</div>
        </div>
      </div>
      <div class="status-bar">
        <div class="status-item" id="resultsStatus">
          No query executed yet
        </div>
        <div class="status-item" id="queryTime">
          <!-- Query execution time will be shown here -->
        </div>
      </div>
    </div>
  </div>

  <footer>
    <p>
      Original work by <a href='https://github.com/kripken'>kripken</a> (<a href='https://github.com/sql-js/sql.js'>sql.js</a>) |
      Project maintained by <a href='https://github.com/lovasoa'>lovasoa</a>
    </p>
  </footer>

  <!-- Templates -->
  <template id="tab-template">
    <button class="tab">
      <slot name="tab-title">Result</slot>
      <span class="tab-close">×</span>
    </button>
  </template>

  <template id="tab-panel-template">
    <div class="tab-panel">
      <div class="results-content">
        <slot name="panel-content">Execute a query to see results</slot>
      </div>
    </div>
  </template>

  <template id="loading-template">
    <div class="loading">
      <div class="spinner"></div>
      <span>Executing query...</span>
    </div>
  </template>

  <template id="table-template">
    <div class="table-wrapper">
      <div class="table-caption">
        <span class="row-count"></span>
        <span class="column-count"></span>
      </div>
      <table>
        <thead>
          <tr>
            <slot name="table-headers"></slot>
          </tr>
        </thead>
        <tbody>
          <slot name="table-rows"></slot>
        </tbody>
      </table>
    </div>
  </template>

  <template id="error-template">
    <div class="no-results error-result">
      <slot name="error-message">Query failed</slot>
    </div>
  </template>

  <template id="history-item-template">
    <div class="history-item">
      <div class="history-query">
        <slot name="query-preview"></slot>
      </div>
      <div class="history-time">
        <slot name="query-time"></slot>
      </div>
    </div>
  </template>

  <template id="shortcut-template">
    <span>
      <span class="shortcut-key">
        <slot name="key"></slot>
      </span>
    </span>
  </template>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/mode/sql/sql.min.js"></script>
  <script type="text/javascript" src="gui.js"></script>
</body>

</html>